<template>
	<view class="live-barrage">
		<scroll-view scroll-y="true" scroll-with-animation="true" :scroll-into-view="scrollInToView" class="scroll pl-3">
			<view :id="'barrage'+item.id" class="flex justify-start align-start rounded p-2 mb-2 content" v-for="(item, index) in list" :key="index">
				<text class="font-md text-danger">{{item.name}}：</text>
				<text class="font-md text-white">{{item.content}}</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	const dom = weex.requireModule('dom')
	export default {
		data() {
			return {
				scrollInToView:"",
				list: []
			}
		},
		mounted() {
			// let id = 1
			// setInterval(() => {
			// 	this.list.push({
			// 		id: id,
			// 		name: "大强" + id,
			// 		content: "弹幕" + id
			// 	})
			// 	this.toBottom()
			// 	id++
			// }, 1000)
		},
		methods:{
			//发送弹幕
			send(data) {
				this.list.push(data)
				this.toBottom()
			},
			//置于底部
			toBottom() {
				setTimeout(() => {
					let len = this.list.length
					if (len > 0 && this.list[len - 1]) {
						this.scrollInToView = 'barrage' + this.list[len - 1].id
					}
				}, 200)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.live-barrage {
		position: fixed;
		bottom: 120rpx;
		left: 0;
		right: 0;
		
		.scroll {
			height: 300rpx;
			width: 520rpx;
			
			.content  {
				background-color: rgba(255,255,255,0.125);
			}
		}
	}
</style>
